<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>黑马商城购物车</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		 <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
			
			font {
				color: #3164af;
				font-size: 18px;
				font-weight: normal;
				padding: 0 10px;
			}
		</style>
		<script type="text/javascript">
			function delProFromCart(pid) {
				if(confirm("您是否要删除该项？")){
					location.href="${pageContext.request.contextPath}/product?method=delProFromCart&pid="+pid;
				}
			}
			function clearCart() {
				if(confirm("您是否要清空购物车？")){
					location.href="${pageContext.request.contextPath}/product?method=clearCart";
				}
			}
		</script>
	</head>

	<body>
		
		<div class="container">
			
			<div id="header"></div>
			<div id="cartTable">
					<table id="demo"></table>
				</div>
			<div class="row">
    <!-- 判断购物车中是否还有商品 -->
   
    
				<div style="margin:0 auto; margin-top:10px;width:950px;">
					<strong style="font-size:16px;margin:5px 0;">订单详情</strong>
					
				</div>
			</div>

			<div style="margin-right:130px;">
				<div style="text-align:right;">
					<em style="color:#ff6600;">
				登录后确认是否享有优惠&nbsp;&nbsp;
			</em> 赠送积分: <em style="color:#ff6600;">1111</em>&nbsp; 商品金额: <strong style="color:#ff6600;">￥111元</strong>
				</div>
				<div style="text-align:right;margin-top:10px;margin-bottom:10px;">
					<a href="javascript:;" onClick="clearCart()" id="clear" class="clear">清空购物车</a>
					<a href="/product?method=submitOrder">
						<input type="button" width="100" value="提交订单" name="submit" border="0" style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
						height:35px;width:100px;color:white;">
					</a>
				</div>
			</div>

		</div>
			
		<div>
			<img alt="" src="/images/cart-empty.png">
			<a href="">返回首页</a>
		</div>
			
		<div id="footer"></div>
			<script src="https://www.layuicdn.com/layui/layui.all.js"></script>
	</body>

</html>


<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');


</script>
<script>
function getUrlSearch(name) {
	  // 未传参，返回空
	  if (!name) return null;
	  // 查询参数：先通过search取值，如果取不到就通过hash来取
	  var after = window.location.search;
	  after = after.substr(1) || window.location.hash.split('?')[1];
	  // 地址栏URL没有查询参数，返回空
	  if (!after) return null;
	  // 如果查询参数中没有"name"，返回空
	  if (after.indexOf(name) === -1) return null;
	 
	  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
	  // 当地址栏参数存在中文时，需要解码，不然会乱码
	  var r = decodeURI(after).match(reg);
	  // 如果url中"name"没有值，返回空
	  if (!r) return null;
	  return r[2];
	}
</script>
<script>
layui.use(['layer','form','jquery','laypage','table'],function(){
	var $=layui.jquery;
	var table=layui.table;
	var layer=layui.layer;
	var uid=getUrlSearch('uid');
	var page = getUrlSearch('page');
	var obj={
			    elem: '#demo'
			    ,url: '/heima/showMyCart?uid='+uid+'&page='+page //数据接口
			    ,page: true //开启分页
			    ,cols: [[ //表头
			       {checkbox:true}
			      ,{field: 'gid', title: '商品id'}
			      ,{field: 'uid', title: '用户id' }
			      ,{field: 'gname', title: '商品名称' }
			      ,{field: 'gphoto', title: '商品图片' } 
			      ,{field: 'gprice', title: '价格',totalRow:true}
			      ,{field: 'count', title: '总数'}
			      ,{toolbar:'#rowTools'}
			    ]]
	};
	table.render(obj);
	$("#checkout").click(function(){
		uid=getUrlSearch('uid');
		$.post('/heima/checkoutCart',{"uid":uid},function(data){
			layer.msg(data);
		},'text');
		return false;
	});
	$.post('/heima/getCartTotal',{"uid":uid},function(data){
		$("#mei").html("￥"+data+"元");
	},'text');
});
</script>